<template>
    <div class="slide-btn" ref="slide_btn" @mousedown="handleMousedown">
        <span v-if="!value" :class="{'slide-icon': true, animate: !flag}" :style="{left: `${x}px`}"></span>
        <span class="slide-text slide-text-clip">
            {{value ? '验证通过' : '请按住滑块，拖动到最右边'}}
        </span>
        <span class="slide-success" v-if="value">
            <Icon type="ios-checkmark-circle" :size="24" color="#19be6b"/>
        </span>
    </div>
</template>
<script>
import { on, off } from '@/libs/tools'

export default {
    data () {
        return {
            flag: false,
            x: 0,
            value: false
        }
    },
    mounted () {
        this.$nextTick(_ => {
            this.maxScrollWidth = this.$refs.slide_btn.offsetWidth - 42
        })
        this.bindEvents()
    },
    methods: {
        // 鼠标按下
        handleMousedown (event) {
            if (this.value || this.flag) return
            this.flag = true
            this.startX = event.x
        },
        // 移动
        move (event) {
            if (this.flag) {
                const x = Math.max(event.x - this.startX, 0)
                this.x = Math.min(x, this.maxScrollWidth)
            }
        },
        // 鼠标方下检查移动距离
        checkMove (event) {
            if (this.flag) {
                this.flag = false
                this.value = this.x >= this.maxScrollWidth
                this.startX = 0
                this.x = 0
                this.$emit('change', this.value)
            }
        },
        // 重置
        reset () {
            this.flag = false
            this.startX = 0
            this.x = 0
            this.value = false
        },
        // 绑定事件
        bindEvents () {
            on(window, 'mousemove', this.move)
            on(window, 'mouseup', this.checkMove)
        },
        // 移除事件
        removeEvents () {
            off(window, 'mousemove', this.move)
            off(window, 'mouseup', this.checkMove)
        }
    },
    beforeDestroy () {
        this.removeEvents()
    }
}
</script>
<style lang="less" scoped>
.slide-btn {
    cursor: pointer;
    line-height: 42px;
    height: 42px;
    color: #61687c;
    text-align: center;
    background: transparent;
    background-color: #f0faff;
    position: relative;
}
.slide-success,
.slide-icon {
    position: absolute;
    top: 0;
    width: 42px;
    height: 42px;
    background-color: #fff;
    line-height: 40px;
}
.slide-icon {
    border: 1px solid #2D8cF0;
    cursor: move;
    background: #fff url('~@/assets/icons/slide_icon.png') no-repeat center center;
    background-size: 16px;
    &.animate {
        transition: left .3s;
    }
}
.slide-success {
    right: 0;
    border: 1px solid #19be6b;
}
.slide-text {
    width: 100%;
    height: 100%;
    display: block;
    user-select: none;
    background: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0, #4d4d4d),
        color-stop(0.4, #4d4d4d),
        color-stop(0.5, #fff),
        color-stop(0.6, #4d4d4d),
        color-stop(1, #4d4d4d)
    );
    -webkit-text-fill-color: transparent;
    animation: slidetounlock 3s infinite;
}
.slide-text-clip {
    -webkit-background-clip: text;
}
@keyframes slidetounlock {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: 200px 0;
    }
}
</style>
